<template>
    <view class="context">
		<view class="title-box"><text class="s-tit">{{title}}</text></view>
		<view>{{titleDesc}}</view>
		<view class="store-ls" v-for="(item,index) in storeList" :key="index">
			<view class="s-ls-tit">{{item.name}}</view>
			<view class="spec-box" v-for="(item1, index1) in specList" :key="index1" v-if="specList.length > 0">
				<text>{{item1.titles ? "规格:" + item1.titles  : ''}}</text>
				<view class="p-box">
					<view class="item-list" v-for="(item2,index2) in unitList" :key="index2">
						<view class="u-box">
							<comConvert :ref="item.id + '_' + item1.ids + '_' + item2.id"
										:id="item.id + '_' + item1.ids + '_' + item2.id" 
										:covernum="getMaptyValue(item,item1,item2)"
										:minUnil="item2.title"
										@changInputTxt="changInputTxt">
							</comConvert>
						</view>
					</view>
				</view>
			</view>
			<view class="spec-box" v-if="specList.length == 0">
			<!-- 	<text>{{item1.titles ? "规格:" + item1.titles  : ''}}</text> -->
				<view class="p-box">
					<view class="item-list" v-for="(item2,index2) in unitList" :key="index2">
						<view class="u-box">
							<comConvert :ref="item.id + '_0_' + item2.id"
										:id="item.id + '_0_' + item2.id" 
										:covernum="getMaptyValue(item,0,item2)"
										:minUnil="item2.title"
										@changInputTxt="changInputTxt">
							</comConvert>
						</view>
					</view>
				</view>
			</view>
		</view>
	
	</view>
</template>

<script>
	import comConvert from "../comm/ComConvert.vue";
	import goodsCtrl from "../../js/gd/GoodsCtrl.js";
	import eventCtrl from "../../js/event/EventCtrl.js";
	export default
	{
		components:{comConvert},
		props:["title","titleDesc"],
		data()
		{
			return{
				mapQty:{},//库存
				storeList:[],
				specList:[],
			    unitList:[],
				qty:[],
			}
		},
		methods:
		{
			getMaptyValue(item,item1,item2)
			{
				let ids = []
				if(this.specList.length>0){
					ids = item1.ids.split("|")
					ids = ids [ ids.length-1 ]
				}

				let value = this.mapQty[item.id + '_' + ids + '_' + item2.id];
				if(!value)
					value = "";
				return value;
			},
			
			/***初始化数据****/
			initData()
			{
				this.mapQty = {};
				this.specList = [];
				this.unitList = [];
				this.storeList = goodsCtrl.getStoreList();
				this.specList = goodsCtrl.getCheckedStoreArr();
				this.unitList = goodsCtrl.getStoreUnit();
				this.mapQty = goodsCtrl.getMapQty();

			},
			
			/***改变成本***/
			changInputTxt(data)
			{
				goodsCtrl.changeQty(data);
			},
			
			/****库存改变更新*****/
			onChangeQtyEvent(data)
			{
				this.removeEvent();
				if(this.$refs[data.id] && this.$refs[data.id][0] && this.$refs[data.id][0].updateInputTxt)
				{
					this.$refs[data.id][0].updateInputTxt(data);
				}
				this.addEvent();
			},
			
			addEvent()
			{
				uni.$on(eventCtrl.CHANGE_QTY_EVENT,this.onChangeQtyEvent);
			},
			
			removeEvent()
			{
				uni.$off(eventCtrl.CHANGE_QTY_EVENT);
			},
		},
		
		mounted() {
			this.addEvent();
		},
	}
</script>

<style lang="scss">
	.context{
		// padding-top: 20px;
		padding-bottom: 20px;
		font-size: 13px;
		.title-box
		{
			// margin-bottom: 10px;
			.s-tit
			{
				font-weight: bold;
				padding-right: 10px;
			}
		}
		
		.s-ls-tit
		{
			color: #38f;
		}
		.p-box
		{
			display: flex;
			flex-wrap: wrap;
			width: 100%;
			.item-list
			{
				.u-box
				{
					padding-right: 10px;
					padding-top: 4px;
					padding-bottom: 4px;
					display: flex;
					flex-wrap: wrap;
				}
			}
		}
	}
</style>
